<template>
  <div class="app-container has-fixed-bar">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="180px">
      <div class="page-header">
        <div class="header-title">平台设置</div>
      </div>
      <el-row :gutter="2">
        <el-col :span="16" :xs="24">
          <el-form-item label="名称" prop="app_site_name">
            <el-input v-model="model.app_site_name" placeholder="名称" />
          </el-form-item>
          <el-form-item label="LOGO" prop="app_site_logo">
            <image-single-selector v-model="model.app_site_logo" button-text="选择图片"></image-single-selector>
          </el-form-item>
          <el-form-item label="用户每日最多发帖数量" prop="app_bar_thread_max_create_count_everyday">
            <el-input-number v-model="model.app_bar_thread_max_create_count_everyday" controls-position="right" placeholder="输入数值" />
            <span class="tips">0为不限制，默认0</span>
          </el-form-item>
          <el-form-item label="浏览记录过期天数" prop="app_bar_thread_view_record_expired_day">
            <el-input-number v-model="model.app_bar_thread_view_record_expired_day" controls-position="right" placeholder="输入过期天数" />
            <span class="tips">默认15</span>
          </el-form-item>
          <!-- <el-form-item label="类型" prop="app_service_type">
            <el-select v-model="model.app_service_type" placeholder="类型名称">
              <el-option v-for="item in serviceTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始文案" prop="app_service_button_start">
            <el-input v-model="model.app_service_button_start" placeholder="开始文案" />
          </el-form-item>
          <el-form-item label="结束文案" prop="app_service_button_end">
            <el-input v-model="model.app_service_button_end" placeholder="结束文案" />
          </el-form-item>
          <el-form-item label="店铺页空闲图片" prop="app_service_free">
            <image-single-selector v-model="model.app_service_free_store" button-text="选择图片"></image-single-selector>
          </el-form-item>
          <el-form-item label="店铺页使用中图片" prop="app_service_in_progress">
            <image-single-selector v-model="model.app_service_in_progress_store" button-text="选择图片"></image-single-selector>
          </el-form-item>
          <el-form-item label="产品页空闲图片" prop="app_service_free">
            <image-single-selector v-model="model.app_service_free_product" button-text="选择图片"></image-single-selector>
          </el-form-item>
          <el-form-item label="产品页使用中图片" prop="app_service_in_progress">
            <image-single-selector v-model="model.app_service_in_progress_product" button-text="选择图片"></image-single-selector>
          </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
    <div class="fixed-bottom-bar">
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getPlatformSetup, setPlatformSetup } from "@/api/setup";
import ImageSingleSelector from "@/components/ApeSelectors/image-single-selector";

const serviceTypeList = [{ label: "台球", value: "台球" }, { label: "洗车", value: "洗车" }, { label: "钻集网", value: "钻集网" }];
export default {
  components: {
    ImageSingleSelector
  },
  data() {
    return {
      serviceTypeList,
      id: "",
      isSubmitLoading: false,
      model: {
        app_site_name: "",
        app_site_logo: undefined,
        app_bar_platform_statement: undefined,
        app_bar_thread_max_create_count_everyday: undefined,
        app_bar_thread_view_record_expired_day: undefined,
        app_service_type: "",
        app_service_in_progress_store: undefined,
        app_service_free_store: undefined,
        app_service_in_progress_product: undefined,
        app_service_free_product: undefined,
        app_service_button_start: "",
        app_service_button_end: ""
      },
      modelRules: {
        app_site_name: [{ required: true, trigger: "blur", message: "请输入名称" }],
        app_site_logo: [{ required: true, trigger: "blur", message: "请选择图片" }]
      }
    };
  },
  created() {
    this.show()
  },
  methods: {
    show() {
      this.resetModal();
      this.isSubmitLoading = false;

      getPlatformSetup().then(result => {
        const data = result
        data.app_site_logo = {
          url: result.app_site_logo
        }
        data.app_service_free_store = {
          url: result.app_service_free_store
        }
        data.app_service_in_progress_store = {
          url: result.app_service_in_progress_store
        }
        data.app_service_free_product = {
          url: result.app_service_free_product
        }
        data.app_service_in_progress_product = {
          url: result.app_service_in_progress_product
        }
        this.model = data
      })
    },
    resetModal() {
      this.model = {
        app_site_name: "",
        app_site_logo: undefined,
        app_bar_platform_statement: undefined,
        app_bar_thread_max_create_count_everyday: undefined,
        app_bar_thread_view_record_expired_day: undefined,
        app_service_type: "",
        app_service_in_progress_store: undefined,
        app_service_free_store: undefined,
        app_service_in_progress_product: undefined,
        app_service_free_product: undefined,
        app_service_button_start: "",
        app_service_button_end: ""
      };
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["dataForm"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        const data = JSON.parse(JSON.stringify(this.model));
        data.app_site_logo = data.app_site_logo.url
        data.app_service_free_store = data.app_service_free_store.url
        data.app_service_in_progress_store = data.app_service_in_progress_store.url
        data.app_service_free_product = data.app_service_free_product.url
        data.app_service_in_progress_product = data.app_service_in_progress_product.url

        setPlatformSetup(data).then(result => {
          this.$message({ message: "保存成功", type: "success" });
          this.close();
        }).finally(() => {
          this.close();
        })
      });
    },
    close() {
      this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
    }
  }
};
</script>
<style lang="scss" scoped>
.page-header {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0;
  margin-bottom: 20px;
}
.block-selector {
  .el-select {
    display: block;
  }
}
.address {
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .btn {
    margin-left: 10px;
  }
}
.dialog-footer {
  padding-left: 80px;

  ::v-deep .el-button {
    padding: 9px 30px;
    font-size: 14px;
  }
}
.tips{
  margin-left: 20px;
  color: #909399;
}
</style>
